<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算数题卡生成器</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>小学口算题卡生成器</h1>
    <div id="app">
        <div id="containor">
            <span>文件位置：</span><input type="text" v-model="directory"><br>
            <span>文件名称：</span><input type="text" v-model="fileName"><br>
            <span>试卷标题：</span><input type="text" v-model="title"><br>
            <span>题目数量：</span><input type="number" v-model="problemNum"><br>
            <span>设定运算符：</span>
            <div>
                <input type="checkbox" v-model="operators" value="+">+
                <input type="checkbox" v-model="operators" value="-">-
                <input type="checkbox" v-model="operators" value="×">×
                <input type="checkbox" v-model="operators" value="÷">÷
            </div><br>
            <span>设定运算数值范围：</span>min<input type="number" v-model="minScope">max<input type="number"
                v-model="maxScope"><br>
            <button @click="create">创建文件</button><br>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    directory: 'C:/Users/Administrator/Desktop/',
                    fileName: 'test',
                    title: 'test',
                    problemNum: 20,
                    operators: [],
                    minScope: 0,
                    maxScope: 100,
                }
            },
            methods: {

                create() {
                    const that = this
                    axios.post('http://localhost:8080/word/generate', {
                        directory: that.directory,
                        fileName: that.fileName,
                        title: that.title,
                        problemNum: that.problemNum,
                        operators: that.operators,
                        minScope: that.minScope,
                        maxScope: that.maxScope,
                    })
                        .then(function (response) {
                            console.log(response.data);
                            alert(response.data.message)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },

            },
        })
        app.mount('#app')
    </script>
</body>

</html>